import React, {FC} from 'react';
import "./index.less";
import {useRequest} from "ahooks";
import * as API from "@/services";
import {Carousel} from "antd";
import {Link} from "umi";
import useNewsAnalyze from "@/pages/NewsPage/commons/useNewsAnalyze";

interface TopNewsBannerProps {
}


interface TopNewsItemProps {
  news: API.FrontNews;
}

const TopNewsItem: FC<TopNewsItemProps> = (props) => {
  const {news: item} = props;
  const {linkUrl} = useNewsAnalyze(item);
  return (
    <div className={"top-news-item"}>
      <Link to={linkUrl} className={"top-news-title"} target="_blank">{item.title}</Link>
      <div className={"top-news-summary"}>{item.abstractContent}</div>
    </div>
  );
};

const TopNewsBanner: FC<TopNewsBannerProps> = (props) => {
  const dataReq = useRequest(() => API.queryFrontNewss({
    pageSize: 3,
    types: "HOME_CAROUSEL",
  }), {refreshDeps: []});

  const data= dataReq.data?.data;
  return (
    <div className={"top-news-banner"}>
      <Carousel arrows={false} dotPosition="right" infinite={false} autoplay={true} autoplaySpeed={3000}>
        {
         data?.map((item, index) => {
            return (
              <TopNewsItem key={index} news={item}/>
            )
          })
        }
      </Carousel>
    </div>
  );
};

export default TopNewsBanner;
